<template>
	<view class="baseForm">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" class="form" labelWidth="160rpx" errorType="toast">
			<u-form-item label="姓名" prop="name">
				<u--input v-model="umodel.name" placeholder="请填写姓名" inputAlign="right" clearable border="none"></u--input>
			</u-form-item>
			<u-form-item label="单选" prop="sex" @click="openSexSelect">
				<u--input v-model="umodel.sex" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择性别"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="picker" prop="pick" @click="openPickSelect">
				<u--input v-model="umodel.pickName" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择pick"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="多选" prop="checkboxValue1">
				<u-checkbox-group v-model="umodel.checks" placement="column" @change="checkboxChange">
					<u-checkbox
						:customStyle="{ marginBottom: '8px' }"
						v-for="(item, index) in checkboxList"
						:key="index"
						:label="item.label"
						:name="item.value"
						:disabled="item.disabled"
					></u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-line></u-line>
			<u-form-item label="是否权限" prop="isOpen">
				<u-switch v-model="umodel.isOpen"></u-switch>
			</u-form-item>
			<u-form-item label="计数器" prop="number">
				<u-number-box v-model="umodel.number" :min="1"></u-number-box>
			</u-form-item>

			<u-form-item label="日期" prop="day" @click="openDaySelect">
				<u--input v-model="umodel.day" border="none" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择日期"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-line></u-line>
			<u-form-item label="日期范围" prop="days" @click="openDaysSelect">
				<u--input v-model="umodel.days" border="none" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择日期范围"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="时间" prop="time" @click="openTimeSelect">
				<u--input v-model="umodel.time" border="none" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择时间"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item label="备注" prop="remarks" borderBottom>
				<u--textarea v-model="umodel.remarks" inputAlign="right" placeholder="请输入备注" height="45px"></u--textarea>
			</u-form-item>
		</u--form>
		<!-- 提交按钮 -->
		<button type="primary" @click="submit" class="submit_btn" :loading="posting">提 交</button>
		<!-- 弹窗 -->
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="这是一条温馨提示" @close="showSex = false" @select="sexSelect"></u-action-sheet>
		<!-- 标准picker -->
		<u-picker :show="showPick" :columns="pickActions" keyName="name" immediateChange @cancel="showPick = false" @confirm="pickSelect"></u-picker>
		<!-- 日历选择弹窗 -->
		<u-calendar :show="showDay" round="20px" @confirm="daySelect" @close="showDay = false"></u-calendar>
		<!-- 日期范围选择弹窗 -->
		<u-calendar :show="showDays" mode="range" round="20px" @confirm="daysSelect" @close="showDays = false"></u-calendar>
		<!-- 时间选择picker弹窗 -->
		<u-datetime-picker :show="showTime" mode="datetime" @cancel="showTime = false" @confirm="timeSelect"></u-datetime-picker>
	</view>
</template>

<script lang="ts" setup>
import { getTimes } from '@/utils/common';
import { reactive, ref } from 'vue';
// 表单数据定义
const umodel = reactive({
	name: '',
	sex: '女',
	day: '',
	days: '',
	startDay: '',
	endDay: '',
	time: '',
	remarks: '',
	checks: ['1', '2'],
	isOpen: false,
	number: 1,
	pickName: '',
	pickId: '',
});

// 表单规则定义
const rules = ref({
	name: [
		{
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
		{
			type: 'string',
			max: 40,
			message: '姓名长度不超过40个字符',
			trigger: ['blur', 'change']
		}
	],
	sex: {
		type: 'string',
		required: true,
		message: '请选择性别',
		trigger: ['blur', 'change']
	},
	pick: {
		type: 'string',
		required: true,
		message: '请选择picker',
		trigger: ['blur', 'change']
	},
	days: {
		type: 'string',
		required: true,
		message: '请选择日期范围',
		trigger: ['blur', 'change']
	}
});

// 类型选择
const actions = ref([{ name: '男' }, { name: '女' }, { name: '保密' }]);
const showSex = ref(false);
function sexSelect(e) {
	umodel.sex = e.name;
}
function openSexSelect() {
	showSex.value = true;
	uni.hideKeyboard();
}

// picker选择
const pickActions = reactive([
	[
		{
			name: '雪月夜',
			id: 2021
		},
		{
			name: '冷夜雨',
			id: 804
		}
	]
]);
const showPick = ref(false);
function pickSelect(e) {
	if (e.value.length) {
		umodel.pickName = e.value[0].name;
		umodel.pickId = e.value[0].id;
	}
	showPick.value = false;
}
function openPickSelect() {
	showPick.value = true;
	uni.hideKeyboard();
}

// 日期选择
const showDay = ref(false);
function daySelect(e) {
	umodel.day = e[0];
	showDay.value = false;
}
function openDaySelect() {
	showDay.value = true;
	uni.hideKeyboard();
}

// 日期选择范围
const showDays = ref(false);
function daysSelect(e) {
	umodel.startDay = e[0];
	umodel.endDay = e[e.length - 1];
	umodel.days = `${umodel.startDay} 至 ${umodel.endDay}`;
	showDays.value = false;
}
function openDaysSelect() {
	showDays.value = true;
	uni.hideKeyboard();
}

// 时间选择
const showTime = ref(false);
function timeSelect(e) {
	console.log(e);
	umodel.time = getTimes(e.value);
	showTime.value = false;
}
function openTimeSelect() {
	showTime.value = true;
	uni.hideKeyboard();
}

// 多选
const checkboxList = reactive([
	{
		label: '器材-外包装破损',
		value: '1',
		disabled: false
	},
	{
		label: '器材-外包装进水',
		value: '2',
		disabled: false
	},
	{
		label: '器材-丢失',
		value: '3',
		disabled: true
	}
]);
const checkboxChange = (n) => {
	console.log('change', n);
};

// 校验提交
const uForm = ref();
const posting = ref(false);
function submit() {
	uForm.value.validate().then((res) => {
		uni.$u.toast('校验通过，即将初始化');
		console.log('传输数据', umodel);
		posting.value = true;
		// 模拟请求
		setTimeout(() => {
			posting.value = false;
			uForm.value.resetFields();
		}, 1000);
	});
}
</script>

<style lang="scss">
.baseForm {
	.form {
		padding: $uni-page-padding;
	}
	.u-form-item {
		min-height: 46px;
	}
	:deep(.uicon-arrow-right) {
		top: 1px;
		margin-left: 3px;
	}
	.submit_btn {
		margin: 60rpx;
		border-radius: 60rpx;
	}
	:deep(.u-form-item__body__right__content__slot) {
		flex-direction: row-reverse;
	}
	:deep(.u-textarea__field) {
		text-align: right;
	}
	.u-textarea {
		border: 1px solid $uni-input-border-color;
		border-radius: 8px;
	}
}
</style>
